<script setup lang="ts">
import { selectList } from "@/api/cms_content";
import { reactive, ref, watch } from "vue";
import { NewCMSContent } from "@/common/type/cms/content";
import ReBanner from "@/components/ReBanner/index.vue";
import NewTag from "@/components/NewTag/NewTag.vue";
import NewHoverPlay from "@/components/NewHoverPlay/index.vue";
import VideoCard from "./card/index.vue";
import { routeOut } from "./home";
import { menuStore } from "@/store/module/menu";

defineOptions({ name: "Home" });

const commandParam = reactive<NewCMSContent>({
  pageNum: 1,
  pageSize: 10
});
const queryParam = reactive<NewCMSContent>({
  pageNum: 1,
  pageSize: 20
  // areaId:'1912442193745633282'
});
const videoCommandList = ref<NewCMSContent[]>([]);
const currentVideo = reactive({
  index: 0
});
const videoQueryList = ref<NewCMSContent[]>([]);
const props = defineProps({
  menu: {}
});

const selectBannerItem = (index: number, state: boolean) => {
  if (state === true) {
    videoCommandList.value.forEach(video => (video.selected = false));
    videoCommandList.value[index].selected = true;
    currentVideo.index = index;
  }
};

const selectVideoList = () => {
  selectList(queryParam).then(res => {
    videoQueryList.value = [];
    videoQueryList.value.push(...res.entity.list);
  });
  selectList(commandParam).then(res => {
    videoCommandList.value = [];
    videoCommandList.value.push(...res.entity.list);
  });
};
selectVideoList();
watch(
  () => menuStore().menu,
  n => {
    commandParam.typeId = n.id;
    queryParam.typeId = n.id;
    selectVideoList();
  }
);
</script>

<template>
  <div class="home">
    <div class="banner-wrapper">
      <re-banner
        :menu="menu"
        :current-video="videoCommandList[currentVideo.index]"
      />
    </div>
    <div class="video-list">
      <div class="command-list">
        <NewHoverPlay
          v-for="(video, index) in videoCommandList"
          :key="index"
          :time="200"
          :index="index"
          :on-change="selectBannerItem"
          @click="selectBannerItem(index, true)"
        >
          <div
            :class="`command-item ${video.selected ? 'command-item-hover' : ''}`"
            :style="`background-image: url('${video.banner.url}');`"
          >
            <NewTag
              style="position: absolute; right: 5px; top: 5px"
              :label="video.type ? video.type[0].name : ''"
            />
            <NewTag
              style="position: absolute; left: 5px; bottom: 5px"
              :label="video.remark"
            />
            <NewTag
              style="position: absolute; left: 5px; top: 5px"
              :label="video.year ? video.year[0].name : ''"
            />
          </div>
        </NewHoverPlay>
      </div>
      <div class="main-title">电视剧</div>
      <div class="main-list">
        <NewHoverPlay
          v-for="(video, index) in videoQueryList"
          :key="index"
          :time="600"
          :boundary="{ top: 20, bottom: 20, left: 180, right: 20 }"
        >
          <div
            class="main-item"
            :style="`background-image: url('${video.banner.url}');`"
          >
            <NewTag
              style="position: absolute; right: 5px; top: 5px"
              :label="video.type ? video.type[0].name : ''"
            />
            <NewTag
              style="position: absolute; left: 5px; bottom: 5px"
              :label="video.remark"
            />
            <NewTag
              style="position: absolute; left: 5px; top: 5px"
              :label="video.year ? video.year[0].name : ''"
            />
          </div>
          <template #content>
            <VideoCard :value="video" />
          </template>
        </NewHoverPlay>
      </div>
    </div>
  </div>
</template>

<style scoped lang="css">
.home {
  width: 100%;
}

.banner-wrapper {
  position: relative;
  margin-left: calc(var(--aside-width) - 40px);
  width: calc(100% - var(--aside-width) + 40px);
  height: 45vw;
  min-height: 600px;
}

.video-list {
  position: absolute;
  margin: -100px 0 0 calc(var(--aside-width));
  width: calc(100% - var(--aside-width));
}

.command-list {
  height: 21vw;
  min-height: 230px;
  max-height: 300px;
  width: 95%;
  margin: 0 auto;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-snap-align: start;
}

.command-item {
  position: relative;
  flex: 0 0 auto;
  height: calc(100% - 10px);
  width: 14.5vw;
  max-width: 210px;
  min-width: 180px;
  margin: 5px 5px;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background-size: cover; /* 保持宽高比，同时覆盖整个元素 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
}

.command-item-hover {
  border: 2px solid rgba(255, 255, 255, 1);
}

.main-list {
  width: 95%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(200px, 1fr)
  ); /* 根据容器宽度自动填充列，最小宽度200px */
  gap: 30px 15px;
}

.main-title {
  margin-left: 60px;
  height: 200px;
  line-height: 250px;
  font-size: var(--newcms-font-size-main-title);
  font-family: shtyk, serif;
}

.main-item {
  position: relative;
  height: 280px;
  border-radius: 10px;
  background-size: cover; /* 保持宽高比，同时覆盖整个元素 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  cursor: pointer;
}
</style>
